<template>
  <div class="login-layout">
    <div class="login-left">
      <div style="position: absolute; z-index: 1; margin: 20px">
        <n-icon size="50">
          <svg
            t="1713367105794"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4575"
            width="200"
            height="200"
          >
            <path
              d="M759.6544 20.48c-19.2 0-39.5776 7.5776-52.0704 18.2784-12.4928 10.752-18.2784 22.016-22.528 29.5936L490.752 413.3376a46.336 46.336 0 0 0-5.632-14.1312L396.3392 245.76a95.8464 95.8464 0 0 0-23.8592-29.5424 82.7904 82.7904 0 0 0-50.7392-18.3296H190.8224c-18.432 0-41.1648 7.68-54.8864 29.5936h-1.3824c-13.2608 21.8112-8.6528 48.0256 0 64.7168l1.3824 1.4336 74.7008 131.0208L85.2992 645.632l-1.4336 1.3824c-9.6768 18.8416-11.0592 44.6976 1.4336 64.8192 11.1104 17.7152 34.6624 29.5424 56.32 29.5424h129.536c19.8656 0 39.7312-7.7312 52.1216-18.2784 12.288-10.5984 18.2784-21.8624 22.528-29.6448 0 0 25.856-46.2336 45.056-80.1792 1.024 3.4816 2.4064 6.656 4.1984 9.8304l185.856 340.736c4.608 8.1408 11.4176 19.1488 23.9616 29.5936 12.4416 10.3424 32.2048 18.2784 52.0704 18.2784h129.4848c19.2 0 42.5984-9.8816 54.9376-29.5424a67.584 67.584 0 0 0 2.7648-64.8192l-1.3824-1.3824-171.776-312.6272 275.968-487.1168a20.992 20.992 0 0 0 1.4336-2.8672c8.96-17.92 11.776-42.1888-1.4336-63.3344-12.6464-20.5824-37.376-29.5424-56.32-29.5424L759.6544 20.48z m5.632 90.112h80.2816l-264.704 470.272c-5.12 9.216-4.4032 30.7712 1.3824 43.6224h-1.3824l1.3824 2.8672v1.3824L742.7584 921.6h-81.5616c-0.5632-0.7168-0.7168 0-1.4848-1.3824l-171.7248-316.8256c30.8224-54.528 275.968-491.4176 275.968-491.4176 1.024-1.9456 0.8704-0.512 1.3824-1.3824zM235.8784 288h80.2816c0.3584 0.3584 0.1536-0.7168 1.4336 1.3824l1.3824 1.4336 76.032 132.352c-23.04 40.6528-128.1024 226.6624-128.1024 226.6624-0.9216 1.6384-0.9216 0.512-1.4336 1.4336H185.1392L302.08 447.1296c0.512-1.792 1.024-3.6864 1.3824-5.632 1.1264-2.304 4.2496-7.7824 4.2496-16.896a43.264 43.264 0 0 0-4.2496-18.3296 56.0128 56.0128 0 0 0-2.7648-5.632l-64.768-112.64z"
              fill="#ec7de2"
              p-id="4576"
            ></path>
          </svg>
        </n-icon>
      </div>
      <n-carousel show-arrow autoplay :interval="5000">
        <template v-for="(item, index) in imgList" :key="index">
          <img class="carousel-img" :src="item" />
        </template>

        <template #arrow="{ prev, next }">
          <div class="custom-arrow">
            <button type="button" class="custom-arrow--left" @click="prev">
              <n-icon>
                <ArrowBack />
              </n-icon>
            </button>
            <button type="button" class="custom-arrow--right" @click="next">
              <n-icon>
                <ArrowForward />
              </n-icon>
            </button>
          </div>
        </template>
        <template #dots="{ total, currentIndex, to }">
          <ul class="custom-dots">
            <li
              v-for="index of total"
              :key="index"
              :class="{ ['is-active']: currentIndex === index - 1 }"
              @click="to(index - 1)"
            />
          </ul>
        </template>
      </n-carousel>
    </div>
    <div class="login-right">
      <div class="login-div box">
        <i class="top box-i"></i><i class="bottom box-i"></i>
        <div
          style="
            font-size: 40px;
            font-weight: bold;
            height: 130px;
            line-height: 130px;
            text-align: center;
          "
        >
          Polaris.Admin
        </div>
        <div style="width: 70%; margin: auto; display: flex; flex-wrap: wrap; gap: 25px">
          <n-input
            type="input"
            show-password-on="click"
            placeholder="账号"
            :maxlength="8"
            size="large"
            ref="inputInstRef"
            v-model:value="account"
          >
            <template #prefix>
              <n-icon :component="PersonOutline" />
            </template>
          </n-input>
          <n-input
            type="password"
            show-password-on="click"
            placeholder="密码"
            :maxlength="8"
            size="large"
            v-model:value="password"
          >
            <template #prefix>
              <n-icon :component="LockClosedOutline" />
            </template>
            <template #password-visible-icon>
              <n-icon :size="16" :component="GlassesOutline" />
            </template>
            <template #password-invisible-icon>
              <n-icon :size="16" :component="Glasses" />
            </template>
          </n-input>
          <div class="login-code">
            <n-input
              v-model:value="vCode"
              type="input"
              show-password-on="click"
              placeholder="验证码"
              :maxlength="8"
              size="large"
            >
              <template #prefix>
                <n-icon :component="NavigateOutline" />
              </template>
            </n-input>
            <n-spin :show="codeShow" content-style="height:100%;">
              <div
                style="
                  border: 1px solid #e1479485;
                  background-size: cover;
                  height: 90%;
                  cursor: pointer;
                  border-radius: 5px;
                "
                :style="{ backgroundImage: 'url(' + vCodeImg + ')' }"
                @click="refreshCode"
              >
                <!-- <my-code :identifyCode="identifyCode"></my-code> -->
                <!-- <n-image preview-disabled :src="vCode" /> -->
              </div>
            </n-spin>
          </div>
          <n-button
            @click="LogInPolaris"
            color="#ff69b4"
            style="width: 100%; margin-top: 20px"
            size="large"
            :disabled="isDisabled"
          >
            <template #icon>
              <n-icon v-show="!isDisabled">
                <LogInOutline />
              </n-icon>
              <n-icon v-show="isDisabled" class="loading">
                <svg
                  t="1714148735144"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4310"
                  width="200"
                  height="200"
                >
                  <path
                    d="M486.4 102.4a25.6 25.6 0 1 1 51.2 0v170.666667a25.6 25.6 0 1 1-51.2 0V102.4z m208.213333 42.0864a25.6 25.6 0 0 1 44.373334 25.6l-85.333334 147.797333a25.6 25.6 0 0 1-44.373333-25.6l85.333333-147.797333z m159.300267 140.526933a25.6 25.6 0 0 1 25.6 44.373334l-147.797333 85.333333a25.6 25.6 0 0 1-25.6-44.373333l147.797333-85.333334zM921.6 486.4a25.6 25.6 0 1 1 0 51.2h-170.666667a25.6 25.6 0 1 1 0-51.2h170.666667z m-42.0864 208.213333a25.6 25.6 0 1 1-25.6 44.373334l-147.797333-85.333334a25.6 25.6 0 0 1 25.6-44.373333l147.797333 85.333333z m-140.526933 159.300267a25.6 25.6 0 0 1-44.373334 25.6l-85.333333-147.797333a25.6 25.6 0 0 1 44.373333-25.6l85.333334 147.797333zM537.6 921.6a25.6 25.6 0 1 1-51.2 0v-170.666667a25.6 25.6 0 1 1 51.2 0v170.666667z m-208.213333-42.0864a25.6 25.6 0 1 1-44.373334-25.6l85.333334-147.797333a25.6 25.6 0 0 1 44.373333 25.6l-85.333333 147.797333zM170.0864 738.986667a25.6 25.6 0 0 1-25.6-44.373334l147.797333-85.333333a25.6 25.6 0 0 1 25.6 44.373333l-147.797333 85.333334zM102.4 537.6a25.6 25.6 0 1 1 0-51.2h170.666667a25.6 25.6 0 1 1 0 51.2H102.4z m42.0864-208.213333a25.6 25.6 0 0 1 25.6-44.373334l147.797333 85.333334a25.6 25.6 0 0 1-25.6 44.373333l-147.797333-85.333333zM285.013333 170.0864a25.6 25.6 0 1 1 44.373334-25.6l85.333333 147.797333a25.6 25.6 0 0 1-44.373333 25.6l-85.333334-147.797333z"
                    fill="#ffffff"
                    p-id="4311"
                  ></path>
                </svg>
              </n-icon>
            </template>
            进入Polaris
          </n-button>
        </div>
        <div style="width: 70%; margin: auto">
          <n-divider dashed> 碎碎恋 </n-divider>
          <div class="heartbreak">
            <my-butterfly></my-butterfly>
            <span>{{ textList[textIdnex] }}</span>
          </div>
        </div>
        <div class="superscript">
          <div class="rect"></div>
          <div class="desc">
            <n-popover trigger="hover" placement="bottom" duration="5">
              <template #trigger>
                <n-icon size="30" style="cursor: pointer" @click="btn_touristLogin">
                  <!-- <img :src="tourist" style="width: 100%;height: 100%;" alt="" srcset=""> -->
                  <TrainOutline />
                </n-icon>
              </template>
              <span>游客登录</span>
            </n-popover>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import {
  ArrowBack,
  ArrowForward,
  LockClosedOutline,
  PersonOutline,
  LogInOutline,
  NavigateOutline,
} from "@vicons/ionicons5";
import { GlassesOutline, Glasses, PlanetOutline, TrainOutline } from "@vicons/ionicons5";
import myButterfly from "@/views/dynamicEffect/butterfly.vue";
import myCode from "@/views/dynamicEffect/vCode.vue";
import { Login, createCode, touristLogin } from "@/api/user.ts";
import { getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import tourist from "@/assets/img/tourist2.png";

const store = useStore();
const { proxy } = getCurrentInstance();
const router = useRouter();
const isDisabled = ref(false);
const account = ref(null);
const password = ref(null);
const imgList = ref([
  "/src/assets/img/carousel/carousel1.png",
  "/src/assets/img/carousel/carousel2.png",
  "/src/assets/img/carousel/carousel3.png",
]);
const textList = ref([
  "在生活的每一个角落，都有一份等待被发现的美丽。",
  "上了生活的贼船，就做快乐的海盗。",
  "人生就是不断地给自己贴上标签，或许我们并不需要这么多的标签。",
  "世界上有两个我，一个善于交往开朗大方，一个半死不活孤独异常。",
]);
const textIdnex = ref(0);
const inputInstRef = ref();
let identifyCode = ref(""); //图形验证码
let identifyCodes = ref("1234567890abcdefjhijklinopqrsduvwxyz"); //验证码出现的数字和字母
const vCodeImg = ref("");
const vCode = ref();
const codeShow = ref(false);

onMounted(() => {
  inputInstRef.value?.focus();
  textIdnex.value = Math.floor(Math.random() * 4);
  identifyCode.value = "";
  makeCode(identifyCodes.value, 4);
  account.value = "admin";
  password.value = "123456";
  refreshCode();
});

// 生成随机数
const randomNum = (min, max) => {
  // max = max + 1
  return Math.floor(Math.random() * max);
};
// 随机生成验证码字符串
const makeCode = (o, l) => {
  for (let i = 0; i < l; i++) {
    identifyCode.value += o[randomNum(0, o.length)];
    console.log("验证码:--", identifyCode.value);
  }
};
// 更新验证码
const refreshCode = () => {
  codeShow.value = true;
  createCode()
    .then((res) => {
      if (res.code == 200) {
        vCodeImg.value = res.data;
      }
      codeShow.value = false;
    })
    .catch((err) => {
      codeShow.value = false;
    });

  // identifyCode.value = "";
  // makeCode(identifyCodes.value, 4);
};

const LogInPolaris = () => {
  if (account.value == null || account.value == undefined || account.value == "") {
    window.$message.warning("小主，忘记填写帐号了！");
    return;
  }
  if (password.value == null || password.value == undefined || password.value == "") {
    window.$message.warning("小主，记得填密码哦！");
    return;
  }
  if (vCode.value == null || vCode.value == undefined || vCode.value == "") {
    window.$message.warning("小主，验证码还没填哦！");
    return;
  }
  isDisabled.value = true;
  let params = {
    Account: account.value,
    Password: password.value,
    Code: vCode.value,
  };
  Login(params)
    .then((res) => {
      if (res.code === 200) {
        window.$message.success("登录成功，即将进入系统");
        store.dispatch("updateMenuIdSaync", null);
        store.dispatch("updateChildrenRouterSaync", null);
        store.dispatch("updateUserInfoSaync", res.data.userInfo);
        proxy.$cookies.delCookie("token");

        proxy.$cookies.setCookie("token", res.data.token, 7 * 86400);
        let token = proxy.$cookies.getCookie('token')
        console.log(token)
        router.push({ path: "/", replace: true });
      } else {
        window.$message.error("登录失败，" + res.message);
      }
      isDisabled.value = false;
    })
    .catch((err) => {
      isDisabled.value = false;
    });
};
const btn_touristLogin = () => {
  touristLogin()
    .then((res) => {
      if (res.code === 200) {
        window.$message.success("登录成功，即将进入系统");
        store.dispatch("updateUserInfoSaync", null);
        store.dispatch("updateChildrenKeySaync", null);
        store.dispatch("updateMenuKeySaync", null);
        proxy.$cookies.setCookie("token", res.data.token, 7);
        router.push({ path: "/", replace: true });
      } else {
        window.$message.error("登录失败，" + res.message);
      }
      isDisabled.value = false;
    })
    .catch((err) => {
      isDisabled.value = false;
    });
};
</script>

<style scoped>
.login-layout {
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
}

.login-left {
  height: 100%;
}

.login-right {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-div {
  border: 1px solid;
  width: 450px;
  height: 550px;
}

.login-div div {
  animation: fly-in 0.5s ease forwards;
}

@keyframes fly-in {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0%);
  }
}

.login-code {
  display: grid;
  grid-template-columns: 60% 35%;
  justify-content: space-between;
  width: 100%;
}

.loading {
  animation: rotate360 2s linear infinite;
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.heartbreak {
  gap: 10px;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  font-family: var(--font-sans), system-ui, -apple-system, PingFang SC, "Microsoft YaHei",
    Segoe UI, Roboto, Helvetica, noto sans sc, hiragino sans gb, "sans-serif",
    Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;
  text-decoration: line-through;
}

.carousel-img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  margin-right: 5px;
}

.custom-arrow {
  display: flex;
  position: absolute;
  bottom: 25px;
  right: 10px;
}

.custom-arrow button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.1);
  border-width: 0;
  border-radius: 8px;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.custom-arrow button:hover {
  background-color: rgba(231, 64, 167, 0.2);
}

.custom-arrow button:active {
  transform: scale(0.95);
  transform-origin: center;
}

.custom-dots {
  display: flex;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.custom-dots li {
  display: inline-block;
  width: 12px;
  height: 2px;
  margin: 0 3px;
  border-radius: 4px;
  background-color: rgba(103, 99, 99, 0.4);
  transition: width 0.3s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.custom-dots li.is-active {
  width: 40px;
  background: #35da9b;
}

@media screen and (max-width: 1100px) {
  .login-left {
    display: none;
  }

  .login-layout {
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
  }
}
</style>

<style scoped>
.container {
  /* position: absolute; */
  top: 30%;
  left: 30%;
  width: 40%;
  height: 40%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: #fff;
}

/************以下为具体实现************/

.superscript {
  position: absolute;
  top: 0px;
  /* left: 0px; */
  right: 0;
  width: 130px;
  height: 130px;
  overflow: hidden;
  /* z-index: -1; */
}

/* 使用背景色渐变 */
.superscript .gradual {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #31b968 50%, transparent 50%);
}

/* 使用三角形 */
.superscript .triangle {
  width: 0;
  height: 0;
  border-top: 130px solid #31b968;
  border-right: 130px solid transparent;
}

/* 使用矩形旋转, 和父节点的 overflow:hidden 配合 */
.superscript .rect {
  width: 183px;
  height: 183px;
  /* margin: -91px 0 0 -91px; */
  padding-left: 330px;
  background: transparent;
  transform: rotateZ(45deg) !important;
}

.superscript .desc {
  position: absolute;
  top: 10%;
  right: 10%;
  z-index: 1;
}
</style>

<!-- <style scoped lang="css">
.box {
  /* border: 1px solid #00bbff; */
  position: relative;
  overflow: hidden;
}
.box::before {
  content: " ";
  position: absolute;
  width: 2px;
  height: 100%;
  top: -100%;
  left: 0;
  background-image: linear-gradient(0deg, #f9b6f3, #f9b6f3, transparent);
  animation: two 4s linear infinite;
}
.box::after {
  content: " ";
  position: absolute;
  width: 2px;
  height: 100%;
  bottom: -100%;
  right: 0;
  background-image: linear-gradient(360deg, transparent, #f9b6f3, #f9b6f3);
  animation: four 4s linear 2s infinite;
}
.box-i {
  position: absolute;
  display: inline-block;
  height: 2px;
  width: 100%;
}
.box .bottom {
  bottom: 0;
  left: -100%;
  background-image: linear-gradient(270deg, #f9b6f3, #f9b6f3, transparent);
  animation: one 4s linear 1s infinite;
}
.box .top {
  top: 0;
  right: -100%;
  background-image: linear-gradient(270deg, transparent, #f9b6f3, #f9b6f3);
  animation: three 4s linear 3s infinite;
}
@keyframes one {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}
@keyframes two {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}
@keyframes three {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}
@keyframes four {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}
</style> -->

<style scoped lang="css">
.box {
  /* border: 1px solid #00bbff; */
  position: relative;
  overflow: hidden;
}

.box::before {
  content: " ";
  position: absolute;
  width: 2px;
  height: 100%;
  top: -100%;
  left: 0;
  background-image: linear-gradient(0deg, transparent, #f9b6f3, #f9b6f3);
  animation: two 4s linear infinite;
}

.box::after {
  content: " ";
  position: absolute;
  width: 2px;
  height: 100%;
  bottom: -100%;
  right: 0;
  background-image: linear-gradient(360deg, #f9b6f3, #f9b6f3, transparent);
  animation: four 4s linear 2s infinite;
}

.box-i {
  position: absolute;
  display: inline-block;
  height: 2px;
  width: 100%;
}

.box .bottom {
  bottom: 0;
  left: -100%;
  background-image: linear-gradient(270deg, transparent, #f9b6f3, #f9b6f3);
  animation: one 4s linear 3s infinite;
}

.box .top {
  top: 0;
  right: -100%;
  background-image: linear-gradient(270deg, #f9b6f3, #f9b6f3, transparent);
  animation: three 4s linear 1s infinite;
}

@keyframes one {
  0% {
    left: 100%;
  }

  50%,
  100% {
    left: -100%;
  }
}

@keyframes two {
  0% {
    top: 100%;
  }

  50%,
  100% {
    top: -100%;
  }
}

@keyframes three {
  0% {
    right: 100%;
  }

  50%,
  100% {
    right: -100%;
  }
}

@keyframes four {
  0% {
    bottom: 100%;
  }

  50%,
  100% {
    bottom: -100%;
  }
}
</style>
